<template>
  <div id="useradd">
    <van-nav-bar title="添加用户" left-arrow @click-left="onClickLeft" />

    <van-form @submit="onSubmit">
      <van-field
        v-model="name"
        name="name"
        label="姓名"
        placeholder="姓名"
        :rules="[{ required: true, message: '姓名' }]"
      />
      <van-field
        v-model="age"
        type="number"
        name="age"
        label="年龄"
        placeholder="年龄"
        :rules="[{ required: true, message: '请填写年龄' }]"
      />

      <van-field
        readonly
        clickable
        name="type"
        :value="valueType.text"
        label="分类"
        placeholder="点击选择分类"
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @confirm="onConfirmType"
          @cancel="showPicker = false"
        />
      </van-popup>

      <van-field
        readonly
        clickable
        name="birthday"
        :value="valueData"
        label="生日"
        placeholder="生日"
        @click="showCalendar = true"
      />
      <van-calendar v-model="showCalendar" @confirm="onConfirmData" />

      <van-field name="icon" label="文件上传">
        <template #input>
          <van-uploader v-model="uploader" :max-count="1" :after-read="submitPic" />
        </template>
      </van-field>

      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>
<script>
import axios from "axios";
import { Toast } from 'vant';
export default {
  data() {
    return {
      name: "",
      age: "",
      valueType: "",
      valueData: "",
      columns: [
        { id: 1, text: "学生" },
        { id: 2, text: "老师" },
        { id: 3, text: "工人" },
      ],
      showPicker: false,
      showCalendar: false,
      uploader: [],
      icon:''
    };
  },
  methods: {
    onClickLeft() {
      history.back();
    },
    onConfirmType(value) {
      this.valueType = value;
      this.showPicker = false;
    },
    onConfirmData(date) {
      this.valueData = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
      this.showCalendar = false;
    },
    onSubmit(values) {
      console.log("submit", values);
      axios.post('/api/user/doadd', {
        name:this.name,
        age:this.age,
        type:this.valueType.id,
        birthday:this.valueData,
        icon:this.icon
      }).then(res => {
        console.log(res);
        if(res.data.code==200){
          Toast.success('添加成功')
          location.reload()
        }
      });    
    },
    submitPic (file) {
      console.log(file);
      let params = new FormData();
      params.append("image", file.file);
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      axios.post('/admin/upload/upload', params, config).then(res => {
        console.log(res);
        this.icon=res.data.data.path

      });     
    },    
  },
};
</script>
<style lang="less" scoped>
@fontColor: white;
@dataColor:#2196f3b8;

/deep/ .van-nav-bar__content {
  background: @dataColor;
  color: @fontColor;
}
/deep/ .van-nav-bar__title {
  color: @fontColor;
}
/deep/ .van-nav-bar .van-icon {
  color: @fontColor;
}
/deep/ .van-button--danger{
background: @dataColor; 
border:1px solid @dataColor;
}
/deep/ .van-calendar__selected-day{
  background: @dataColor; 
}
</style>